import { Provider } from 'react-redux';
import './App.css';
import BuggyCounter from './components/BuggyCounter';
import Cart from './components/Cart';
import ErrorBoundary from './components/common/ErrorBoundary';
import Counter1 from './components/Counter1';
import Counter2 from './components/Counter2';
import FormSubmitter from './components/FormSubmitter';
import MessageCenter from './components/MessageCenter';
import { ThemeProvider } from './components/ThemeContext';
import ThemedButton from './components/ThemedButton';
import CounterComponent from './hooks/CounterComponent';
import { store } from './components/redux/reduxStore';
import { ShoppingCartRedux } from './components/redux/ShoppingCartRedux';
import { ShoppingCartZustand } from './components/zustand/Zustand';

import { QueryClient, QueryClientProvider } from 'react-query';
import { PostList } from './components/ReactQuery';
import { SignUpForm } from './components/ReactHookForm';
import { Mouse } from './components/Mouse';

const queryClient = new QueryClient();

const App: React.FC = () => {
  return (
    <ThemeProvider>
      <div>
        <h1>Demo React应用</h1>
        <div className="container mx-auto mt-10">
          <h2 className="mb-6 text-3xl font-bold">2.组件：Counter1</h2>
          <Counter1 />
        </div>
        <div className="container mx-auto mt-10">
          <h2 className="mb-6 text-3xl font-bold">4.React Hooks：Counter2</h2>
          <Counter2 />
        </div>
        <div className="container mx-auto mt-10">
          <h2 className="mb-6 text-3xl font-bold">5.状态提升：MessageCenter</h2>
          <MessageCenter />
        </div>
        <div className="container mx-auto mt-10">
          <h2 className="mb-6 text-3xl font-bold">6.自定义 hook：useCounter</h2>
          <CounterComponent />
        </div>
        <div className="container mx-auto mt-10">
          <h1 className="mb-4 text-2xl font-bold">7.主題切換示例</h1>
          <ThemedButton />
        </div>
        <div className="container mx-auto mt-10">
          <h1 className="mb-4 text-2xl font-bold">8.错误边界</h1>
          <ErrorBoundary fallback={<h2>哎呀！计数器坏掉了。</h2>}>
            <BuggyCounter />
          </ErrorBoundary>
          <hr />
          <ErrorBoundary>
            <h2>这里很安全，不会收到上面服务的影响。</h2>
            <BuggyCounter />
          </ErrorBoundary>
        </div>
        <div className="container mx-auto mt-10">
          <h1 className="mb-4 text-2xl font-bold">
            9.性能优化：购物车-memo、useMemo和useCallback。
          </h1>
          <Cart
            products={[
              { id: 1, name: '鸡翅', price: 12 },
              { id: 2, name: '可乐', price: 9 },
            ]}
          />
        </div>
        <div className="container mx-auto mt-10">
          <h1 className="mb-4 text-2xl font-bold">10.错误处理和容错：表单提交示例</h1>
          <FormSubmitter />
        </div>
        <div className="container mx-auto mt-10">
          <h1 className="mb-4 text-2xl font-bold">12。状态管理：Redux实现</h1>
          <Provider store={store}>
            <ShoppingCartRedux />
          </Provider>
        </div>
        <div className="container mx-auto mt-10">
          <h1 className="mb-4 text-2xl font-bold">12。状态管理：Zustand实现</h1>
          <ShoppingCartZustand />
        </div>
        <div className="container mx-auto mt-10">
          <h1 className="mb-4 text-2xl font-bold">13.React生态：react-query</h1>
          <QueryClientProvider client={queryClient}>
            <PostList />
          </QueryClientProvider>
        </div>
        <div className="container mx-auto mt-10">
          <h1 className="mb-4 text-2xl font-bold">13.React生态：react-hook-form</h1>
          <SignUpForm />
        </div>
        <div className="container mx-auto mt-10">
          <h1 className="mb-4 text-2xl font-bold">15.React进阶技巧：使用 Render Props</h1>
          <Mouse
            render={({ x, y }) => (
              <h1>
                鼠标的位置是 ({x}, {y})
              </h1>
            )}
          />
        </div>
      </div>
    </ThemeProvider>
  );
};

export default App;
